<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title flex-between">
      <span class="t-name">销售同比分析</span>
    </div>
    <div id="saleTB"></div>
  </div>
</template>
<script>
  import NP from 'number-precision'
  import {fontSizeRem} from '../../utils'

  const colors = [
    {
      borderColor: '#0895E0',
      color: 'rgba(8,149,224,0.36)'
    },

    {
      borderColor: '#FFC8B7',
      color: 'rgba(255,200,183,0.36)'
    },

  ]


  export default {

    props:{
      equallyCustomerVOList:{
        type:Array,
        default:()=>[]
    }
    },
    name:'electricity',
    data(){
      return{
        chart: null,
        activeTab:'year',
        option: {
          backgroundColor: 'transparent',
          grid: {
            top: 90,
            right: 110,
            bottom: 45,
            left: 80,
          },
          legend:{
            right:30,
            top:20,
            textStyle:{
              color:'#fff',
              fontSize:32,
              fontWeight:'bolder'
            },
            data:[]
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              color: '#ffffff'
            },
            backgroundColor: 'rgba(0, 34, 81, 0.85)',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ECF0FF', //更改坐标轴文字颜色
                fontSize: 32, //更改坐标轴文字大小
                fontWeight:'bold'
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              }
            },
          },
          yAxis: [{
            type: 'value',
            min:0,
            axisTick: {
              show: true,

            },
            axisLabel: {
              fontSize:32,
              fontWeight:'bold',
              margin: 20,
              show: true,
              color:'#ECF0FF'
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              },
            },
          },    {
            type: 'value',
            max:100,
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: false,

            },
            axisLabel: {
              fontSize:32,
              fontWeight:'bold',
              margin: 20,
              show: true,
              color:'#ECF0FF',
              formatter: '{value}%'
            }
          }],
          series: [],
        },
      }
    },
    methods:{
      setOption(){
        let legend = [],xAxis = [],series = [],rateMin = 0;
        if(this.equallyCustomerVOList&&this.equallyCustomerVOList.length){
          const data = this.equallyCustomerVOList[0]
          if(data.hasOwnProperty('lastYear')){
            legend = [data.thisYear.toString(),data.lastYear.toString(),'单月同比']
          }
        }

        this.equallyCustomerVOList.forEach(o=>{
          if(o.hasOwnProperty('monthValue')
          && o.hasOwnProperty('thisYearActualPrice')
          && o.hasOwnProperty('lastYearActualPrice')
          && o.hasOwnProperty('rateOfChange')) {
            xAxis.push(o.monthValue+'月');
            if(!series.length){
              series = [
                {
                  name:legend[0],
                  type:'bar',
                  data:[o.thisYearActualPrice||0],
                  barWidth: 23,
                  gapWidth:5,
                  itemStyle : {
                    borderColor: colors[0].borderColor,
                    color: colors[0].color,
                  }
                }, {
                  name:legend[1],
                  type:'bar',
                  data:[o.lastYearActualPrice||0],
                  barWidth: 23,
                  gapWidth:5,
                  itemStyle : {
                    borderColor: colors[1].borderColor,
                    color: colors[1].color,
                  }
                },{
                  name:legend[2],
                  type:'line',
                  symbol:'none',
                  color:'#EDF9FF',
                  data:[NP.times(Number(o.rateOfChange),100)||0],
                  yAxisIndex: 1,
                }
              ]
            }else {

              series[0].data.push(o.thisYearActualPrice||0)
              series[1].data.push(o.lastYearActualPrice||0)
              series[2].data.push(NP.times(Number(o.rateOfChange),100)||0)
            }
          }
        })
        if(series.length){
          rateMin = _.min(series[2].data)
        }
        this.option.legend.data = legend;
        this.option.xAxis.data = xAxis;
        this.option.series = series;
        this.option.yAxis[0].min = rateMin
        this.option.yAxis[1].min = rateMin
        this.chart.setOption(this.option, true)
      },
      initChart () {
        this.chart = this.$echarts.init(
          document.getElementById(`saleTB`)
        )
        this.chart.setOption(this.option, true)
      }
    },
    mounted () {
      this.initChart()
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container{
    width: 100%;
    background: url("../../assets/imgs/sale_tb_bg.png");
    padding: 23px;
    .pannel-title {
      background: url("../../assets/imgs/sale_tb_title.png") no-repeat;
    }
    #saleTB{
      flex: 1;
    }
  }
</style>
